<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片管理</title>
	<script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
	
	<style type="text/css">
/* .layui-table-cell {
	text-align: center;
	height: auto;
	white-space: normal;
	width: auto;
}
#longImg{
	height:400px;
} */
	.layui-table-cell{
		     height: auto!important;
		     white-space: normal;
		}
	</style>
</head>
<body class="childrenBody">
	<form class="layui-form" method="post" onsubmit="return false;">
	<label class="layui-form-mid">产品:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="productType" name="pro_id">
					
					</select>
				</div>
		
			<div class="layui-input-inline">
				<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
			</div>
		
	</form>
	<table class="layui-table" lay-filter="test" id="demo" lay-filter="table"></table>
	<script type="text/javascript">
		var json;
		layui.use(['table','form','layer'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var layer = layui.layer;
		  var $ = layui.$;
		  //动态化类型
		  $.post('http://localhost:8080/FiveClothes/allPro1',function(res){
			  if(res!=null){
				  $("#productType").empty();
				  $("#productType").append(new Option("请选择",""));
				  $.each(res,function(index,item){
					  $("#productType").append(new Option(item.p_name,item.p_id));
				  });
			  }else {
				  $("#productType").append(new Option("暂无数据",""));
			  }
			  form.render();
		  },'json');
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    //,height: 300
		    ,url: 'http://localhost:8080/FiveClothes/productImg/findProImgByPage' //数据接口
		    ,page:true
		    ,limits:[2,4]
		    ,cols: [[ //表头
		    	{field: 'id', title: 'ID', align:'center'}
			      ,{field: 'url', title: '细节图链接', align:'center',width:300,templet:'<div><img src="../../../images/{{d.url}}" id="longImg" /></div>'}
			      ,{field: 'p_name', title: '所属商品', align:'center'}
			      ,{field: 'weight', title: '权重'}
			      ,{field:'shop',title: '所属商品id',align:'center'}
			      ,{field: 'right', title: '按钮', toolbar:'#barDemo', align:'center'}
		    ]]
		    ,id:'idTest'
		  });
		  
		  form.on('submit(formDemo)', function(data){
			  
			  table.reload('idTest', {
				  
				  where:data.field
				  ,page: {
	                    curr: 1 //重新从第 1 页开始
	                  }
				});
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			    var data = obj.data; //获得当前行数据
			    var layEvent = obj.event; //获得 lay-event 对应的值
			    
			    
			    if(layEvent === 'del'){ //删除
			     layer.confirm('真的删除行么', function(index){
			    	  $.post('http://localhost:8080/FiveClothes/productImg/deleteProImg',{"id":data.id},
							  function(res){
			    		  			var msg;
						  			if(res){
						  				msg="删除成功"
						  			}else{
						  				msg="删除失败"
						  			}
						  			layer.msg(msg, {
							  			  icon: 1,
							  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
							  			}, function(){
											 window.location.reload();//刷新父页面
							  			}); 
						  			 
						  },'json');
			    	  layer.close(index);
			      });
			    } else if(layEvent === 'edit'){ //编辑
			    	json = JSON.stringify(data);
			    	//console.log(json);
			    	layer.open({
						 type: 2, 
						 content: 'productImgUpdate.html',
						 area: ['500px','500px']
					}); 
			    } 
			  });
		  
		
		});
		
	
	 </script>
	 <script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
</body>
</html>